<template>
  <div class="link_container">
    <div class="search">
      <div class="search_module">
        <!-- <h2 class="search_title">程序员都在用的提效导航</h2> -->
        <div class="search_form">
          <div class="search_select">
            <span :class="['item', { active: currentSearchIndex === index }]" v-for="(item, index) in searchOptions"
              :key="index" @click="handleChangeSearch(index)">{{ item.label }}</span>
          </div>
          <div class="search_content">
            <input placeholder="请输入内容" v-model="searchKeyword" class="search_input" />
            <div class="btn_search" @click="handleSearch">搜索</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 常用工具 -->
    <div class="web_module">
      <h2 class="web_module_title">
        常用工具
      </h2>
      <div class="tab_content">
        <a :href="item.href" class="a_class" target="_blank" v-for="(item, index) in utilList" :key="index">
          <div class="module_link_card">
            <div class="module_link_card_title">
              <img :src="item.img" class="link_card_icon">
              <p class="link_card_title"><b>{{ item.title }}</b></p>
            </div>
            <p class="link_card_desc">{{ item.summary }}</p>
          </div>
        </a>
      </div>
    </div>

    <!-- 学习手册 -->
    <div class="web_module">
      <h2 class="web_module_title">
        学习手册
      </h2>
      <div class="tab_content">
        <a :href="item.href" class="a_class" target="_blank" v-for="(item, index) in xuexishouceList" :key="index">
          <div class="module_link_card">
            <div class="module_link_card_title">
              <img :src="item.img" class="link_card_icon">
              <p class="link_card_title"><b>{{ item.title }}</b></p>
            </div>

            <p class="link_card_desc">{{ item.summary }}</p>
          </div>
        </a>
      </div>
    </div>

    <!-- 技术社区 -->
    <div class="web_module">
      <h2 class="web_module_title">
        技术社区
      </h2>
      <div class="tab_content">
        <a :href="item.href" class="a_class" target="_blank" v-for="(item, index) in jishushequList" :key="index">
          <div class="module_link_card">
            <div class="module_link_card_title">
              <img :src="item.img" class="link_card_icon">
              <p class="link_card_title"><b>{{ item.title }}</b></p>
            </div>

            <p class="link_card_desc">{{ item.summary }}</p>
          </div>
        </a>
      </div>
    </div>
    <!-- 人文哲学 -->
    <div class="web_module">
      <h2 class="web_module_title">
        人文哲学
      </h2>
      <div class="tab_content">
        <a :href="item.href" class="a_class" target="_blank" v-for="(item, index) in renwenList" :key="index">
          <div class="module_link_card">
            <div class="module_link_card_title">
              <img :src="item.img" class="link_card_icon">
              <p class="link_card_title"><b>{{ item.title }}</b></p>
            </div>

            <p class="link_card_desc">{{ item.summary }}</p>
          </div>
        </a>
      </div>
    </div>
  </div>
</template>
<script setup name="Link">
import { listSearch } from "@/api/link/search";
import { listWeb } from "@/api/link/web";
const currentSearchIndex = ref(0);
const searchKeyword = ref("");
const searchUrl = ref("");
const searchOptions = ref([]);
const webLinkList = ref([]);
// 常用工具
const utilList = ref([])
// 学习手册
const xuexishouceList = ref([])

const jishushequList = ref([])

const renwenList = ref([])
// 切换搜索引擎
function handleChangeSearch(index) {
  currentSearchIndex.value = index;
  searchUrl.value = searchOptions.value[index].value;
}

// 搜索
function handleSearch() {
  window.open(searchUrl.value + searchKeyword.value);
}

/** 查询搜索引擎列表 */
function getSearchList() {
  listSearch({ status: 0 }).then(response => {
    searchOptions.value = response.data.map(item => ({ label: item.title, value: item.baseUrl }));
    searchUrl.value = searchOptions.value[0].value;
  });
  let query = { pageSize: 9999 }
  listWeb(query).then(response => {
    webLinkList.value = response.data.list;
    // 拆分数据
    utilList.value = webLinkList.value.filter(item => item.type == 0);
    xuexishouceList.value = webLinkList.value.filter(item => item.type == 1);
    jishushequList.value = webLinkList.value.filter(item => item.type == 2);
    renwenList.value = webLinkList.value.filter(item => item.type == 3);
  });
}
getSearchList();
</script>
<style lang="scss" scoped>
.link_container {
  padding-top: 80px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;

  // 搜索
  .search {
    width: 700px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    margin-bottom: 20px;
    .search_module {
      width: 700px;
      text-align: center;
      .search_title {
        font-size: 40px;
        line-height: 70px;
        margin-bottom: 52px;
        color: #fff;
        white-space: nowrap;
        font-family: 'Ali_R';
        font-weight: normal;
      }

      .search_form {
        width: 100%;

        .search_select {
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          box-sizing: border-box;
          .item {
            margin-right: 20px;
            height: 30px;
            line-height: 30px;
            font-family: 'Ali_R';
            font-size: 14px;
            color: #000;
            padding: 0 20px;
            border-radius: 6px 6px 0 0;
            cursor: pointer;
          }
          .active {
            background-color: #fff;
            color: #365536;
          }
        }

        .search_content {
          margin-top: -2px;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          box-sizing: border-box;
          font-size: 16px;
          .search_input {
            font-family: 'Ali_R';
            padding: 15px 200px 15px 20px;
            color: #8f8f8f;
            border-radius: 6px 0px 0px 6px;
            font-size: inherit;
            color: #3c3c3c;
            width: 100%;
            border: none;
            &:focus {
              outline: none;
              border-color: #9ecaed;
              box-shadow: 0 0 10px #9ecaed;
            }
          }

          .btn_search {
            width: 126px;
            border-radius: 0 6px 6px 0;
            background-color: #85b13b;
            font-family: 'Ali_R';
            margin-left: -1px;
            color: #fff;
            font-size: inherit;
            border: none;
            text-align: center;
            cursor: pointer;
            padding: 15px;
          }
        }


      }

    }
  }

  .web_module {
    margin-bottom: 40px;
    width: 70%;

    .web_module_title {
      height: 26px;
      line-height: 26px;
      margin-bottom: 24px;
      font-family: 'Ali_B';
      font-size: 22px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      box-sizing: border-box;
    }

    .tab_content {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: wrap;

      .module_link_card {
        padding: 20px;
        width: 200px;
        margin-bottom: 20px;
        margin-right: 10px;
        border-radius: 10px;
        background-color: #fff;

        .module_link_card_title {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          box-sizing: border-box;
          margin-bottom: 12px;
          font-family: 'Ali_M';
        }

        .link_card_icon {
          width: 32px;
          height: 32px;
          border-radius: 100%;
          margin-right: 14px;
        }

        .link_card_title {
          font-size: 18px;
          color: #3c3c3c;
        }

        .link_card_desc {
          font-size: 14px;
          color: #8f8f8f;
          font-family: 'Ali_R';
          line-height: 18px;
          height: 36px;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }

        &:hover {
          -webkit-transform: translateY(-4px);
          -ms-transform: translateY(-4px);
          transform: translateY(-4px);
          -webkit-box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
          box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);

          .link_card_title {
            font-size: 16px;
            color: #ff6000;
          }

        }
      }
    }
  }
}

.a_class {
  text-decoration: none;
  color: #365536;
}
</style>
